<template>
  <div class="article-list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-if="list.length==0" class="list-nodate">暂无数据</div>
        <article-cell v-else v-for="item in list" :key="item.id" :data="item"></article-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import articleCell from '@/components/article-cell'

export default {
  props: ['id', 'type'],
  components: {
    articleCell
  },
  data () {
    return {
      page: 1,
      limit: 20,
      isLoading: false,
      loading: false,
      finished: false,
      list: []
    }
  },
  created () {
    // this.onRefresh()
  },
  methods: {
    onRefresh () {
      this.page = 1
      this.finished = false
      this.getList(list => {
        this.list = list
        this.isLoading = false
      })
    },
    onLoad () {
      this.getList(list => {
        this.loading = false
        if (list.length < this.limit) {
          this.finished = true
        }
        if (this.page === 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        this.page++
      })
    },
    getList (callback) {
      this.$axios
        .get('/xbkj-dj/web/article/getArticleListByCategoryId', {
          categoryId: this.id,
          page: this.page,
          limit: this.limit
        })
        .then(res => {
          callback && callback(res.page.list)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.article-list {
  background-color: #fff;
  padding: 0 20px;
  .list-nodate {
    height: 116px;
    text-align: center;
    line-height: 116px;
    font-size: 14px;
    color: #ccc;
  }
}
</style>
